<template>
	<div v-loading="loading">
		<crumbs :title="'意见反馈'"></crumbs>
		<div class="container" v-loading="loading">
			<div class="handle-box">
				用户名称:
				<el-select clearable filterable v-model="Search_form.userId" placeholder="请选择用户" class="mr10">
					<el-option v-for="(item, index) in userDropdown" :key="index" :label="item.name" :value="item.id"></el-option>
				</el-select>
				反馈状态:
				<el-select clearable v-if="nowSearch == 'state'" v-model="Search_form.state" placeholder="请选择反馈状态" class="mr10">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
				<el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
			</div>
			<el-table v-loading="$store.state.requestLoading" :data="allData" border ref="multipleTable">
				<el-table-column prop="id" label="编号" :show-overflow-tooltip="true" min-width="100" align="center"></el-table-column>
				<el-table-column prop="username" label="用户名称" :show-overflow-tooltip="true" min-width="100" align="center"></el-table-column>
				<el-table-column prop="username" label="用户类型" :show-overflow-tooltip="true" min-width="100" align="center"></el-table-column>
				<el-table-column prop="username" label="手机号" :show-overflow-tooltip="true" min-width="100" align="center"></el-table-column>
				<el-table-column prop="content" label="反馈内容" :show-overflow-tooltip="true" min-width="320" align="center"></el-table-column>
				<el-table-column prop="result" label="处理结果" :show-overflow-tooltip="true" min-width="320" align="center"></el-table-column>
				<el-table-column prop="createTime" label="反馈时间" min-width="160" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.createTime | change }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="state" label="反馈状态" min-width="120" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.state == 'see'">未处理</span>
						<span v-else>已处理</span>
					</template>
				</el-table-column>

				<!-- <el-table-column :show-overflow-tooltip="true" align="center" prop="userImgUrl" label="用户头像" min-width="100">
					<template slot-scope="scope">
						<el-popover placement="top-start" trigger="click">
							<a :href="scope.row.userImgUrl" target="_blank" title="查看图片">
								<img :src="scope.row.userImgUrl" style="min-width: 200px;height: 200px; cursor:pointer;" />
							</a>
							<img slot="reference" :src="scope.row.userImgUrl" style="width: 50px;height: 50px; cursor:pointer" />
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="imgUrl" label="图片" min-width="150">
					<template slot-scope="scope">
						 <el-image 
						    style="width: 100px; height: 60px"
						    :src="scope.row.imgUrl[0]" 
						    :preview-src-list="scope.row.imgUrl">
						  </el-image>
					</template>
				</el-table-column> -->

				<el-table-column prop="sourceName" label="操作" min-width="120" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-search" @click="bigImg(scope.row)">查看图片
						</el-button> 
						<el-button  v-if="scope.row.state == 'see'" :loading="loading2" type="text" icon="el-icon-chat-dot-round" @click="dispose(scope.row)" >处理</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-sizes="[5, 10, 20, 50, 100]"
					:page-size="size"
					:current-page="currentPage"
					layout="total, sizes, prev, pager, next, jumper"
					:total="totals"
				></el-pagination>
			</div>
		</div>
		
		<el-dialog
		:modal="false" 
		  title="提示"
		  :visible.sync="centerDialogVisible"
		  width="30%"
		  center>
		  <span><el-input v-model="input" placeholder="请输处理结果"></el-input></span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="centerDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="ensure()">确 定</el-button>
		  </span>
		</el-dialog>
		
		
		<el-dialog title="回复页" top="5vh" 		  :modal="false" :visible.sync="editVisible" width="50%">
		  <el-form ref="form" label-width="100px">
		   
		    <el-form-item label="反馈图片">
		      <span v-for="(item, index) in nowSee.imgUrl" :key="index">
		        <el-image
		          style="width: 100px; height: 100px"
		          :src="item"
		          :preview-src-list="nowSee.imgUrl"
		        >
		        </el-image>
		      </span>
		    </el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="editVisible = false">确定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>
<script>
import crumbs from '../../views/Crumbs.vue';

export default {
	name: '',
	components: {
		crumbs
	},
	data() {
		return {
			input:'',
			centerDialogVisible:false,
			loading: true,
			//搜索关键词
			select_word: null,
			//数据
			allData: null,
			//总页数
			totals: null,
			//每页的数据
			size: 5,
			currentPage: 1,
			editVisible: false,
			imageBig: '',
			nowSee: {
				id: null,
				sendContent: null,
				sendTime: null,
				imgUrl: null
			},
			imageList:[],
			//回复内容
			textarea: null,
			//工单状态
			options: [
				{
					value: 'see',
					label: '未处理'
				},
				{
					value: 'seen',
					label: '已处理'
				}
			],
			Search_form: {
				userId: '',
				state: ''
			},
			//用户下拉
			userDropdown: null,
			nowSearch: 'state',
			loading2: true,
			row:''
		};
	},
	methods: {
		dispose(row){
			this.centerDialogVisible=!this.centerDialogVisible;
			this.input='';
			this.row=row;
		},
		//搜索
		search(pageNo) {
			// console.log(pageNo)
			this.loading2 = true;
			this.getusersListAll();
		},
		getusersListAll() {
			this.loading = true;
			this.$axios
				.opinionQueryUserChat({
					userId: this.Search_form.userId,
					state: this.Search_form.state,
					pageNo: this.currentPage,
					pageSize: this.size
				})
				.then(res => {
					this.loading2 = false;
					if (res.success) {
						this.totals = res.data.total;
						this.allData = res.data.records;
					}
					this.loading = false;
				});
		},
		handleSizeChange(item) {
			this.size = item;
			this.getusersListAll();
		},
		handleCurrentChange(item) {
			this.currentPage = item;
			this.getusersListAll();
		},
		//查看图片
		bigImg(item) {
			this.nowSee=item;
			this.editVisible=true;
		},
		// 已读
		ensure() {
			if(!this.input){
				this.$message({
					message: '请输入处理结果',
					type: 'error'
				});
				return;
			}
			
			this.loading2 = true;
			this.editVisible = false;
			this.$axios
				.opinionUpdateSeen({
					id: this.row.id,
					result:this.input
				})
				.then(res => {
					this.loading2 = false;
					this.centerDialogVisible=false;
					if (res.success) {
						this.$message({
							message: '操作成功',
							type: 'success'
						});
					}
					this.getusersListAll();
				});
		},
		//获取用户
		getUserDropdown() {
			this.$axios.getUserDropdown().then(res => {
				if (res.success) {
					this.userDropdown = res.data;
				}
			});
		}
	},
	created() {
		this.getusersListAll({
			pageNo: 1
		});
		this.getUserDropdown();
	},
	filters: {
		//改变时间格式
		change(item) {
			if (!item) return '暂无';
			let time = new Date(item);
			let hours = time.getHours().toString().length > 1 ? time.getHours() : '0' + time.getHours();
			let Seconds = time.getSeconds().toString().length > 1 ? time.getSeconds() : '0' + time.getSeconds();
			let Minutes = time.getMinutes().toString().length > 1 ? time.getMinutes() : '0' + time.getMinutes();
			return time.getFullYear() + '-' + (time.getMonth() * 1 + 1) + '-' + time.getDate() + ' ' + hours + ':' + Minutes + ':' + Seconds;
		}
	}
};
</script>
<style scoped>
	
	
.handle-box {
	margin-bottom: 20px;
}

.handle-input {
	width: 300px;
	display: inline-block;
}

.crumbs {
	margin: 10px 0;
}

.mr10 {
	margin-right: 10px;
}

.handle-select {
	width: 120px;
}

.container {
	padding: 30px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
}

 /deep/ .el-dialog__wrapper{
 	z-index: 12 !important;
} 


</style>
